﻿<template>
    <div style="display:inline-block;">
        <component is="style" />
        <div class="clickarea" v-on:click.stop="showMenu">
            <slot>
                <van-icon name="ellipsis" class="size-16 color-gray" style="font-weight: bold;"></van-icon>
            </slot>
        </div>
        <template v-if="mask">
            <div class="mask" v-on:click="hideMenu"></div>
            <div id="menus" :class="['menus', animationcl]" :style="{'top':top,'right':right,'left':left,'bottom':bottom}" v-on:click="hideMenu">
                <slot name="items"></slot>
            </div>
        </template>
        <template v-else>
            <div style="display: none;">
                <slot name="items"></slot>
            </div>
        </template>
    </div>
</template>

<script>
    module = (function (hxt) {
        return {
            props: {

            },
            name: 'hxt-dropbutton',
            data: function () {
                return {
                    optor: hxt.store.optor,
                    mask: false,
                    left: 'auto',
                    right: 'auto',
                    top: 'auto',
                    bottom: 'auto',
                    animationcl: 'right-left'

                };
            },
            watch: {

            },
            computed: {

            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;
            },
            methods: {
                showMenu: function (e) {
                    var _this = this,
                        innerWidth = window.innerWidth,
                        innerHeight = window.innerHeight,
                        width = $(e.target).outerWidth(true),
                        height = $(e.target).outerHeight(true),
                        p = $(e.target).offset(),
                        bottom = innerHeight - (p.top + height);

                    if (p.top >= innerHeight * 0.66) { //下面显示不下往上飘
                        if (p.left >= innerWidth / 2) {
                            _this.left = 'auto';
                            _this.bottom = bottom + 'px';
                            _this.top = 'auto';
                            _this.right = (innerWidth - p.left) + 'px';
                            _this.animationcl = 'right-left';
                        } else {
                            _this.left = (p.left + width) + 'px';
                            _this.bottom = bottom + 'px';
                            _this.top = 'auto';
                            _this.right = 'auto';
                            _this.animationcl = 'left-right';
                        }
                    } else {
                        if (p.left >= innerWidth / 2) {
                            _this.left = 'auto';
                            _this.bottom = 'auto';
                            _this.top = p.top + 'px';
                            _this.right = (innerWidth - p.left) + 'px';
                            _this.animationcl = 'right-left';
                        } else {
                            _this.left = (p.left + width) + 'px';
                            _this.bottom = 'auto';
                            _this.top = p.top + 'px';
                            _this.right = 'auto';
                            _this.animationcl = 'left-right';
                        }
                    }
                    _this.mask = true;
                },
                hideMenu: function () {
                    this.mask = false;
                },

            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .clickarea { padding: 3px; display: inline-block; }

    .mask { position: fixed; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #FFF; opacity: 0.01; }

    .menus { position: fixed; display: inline-block; z-index: 1000; padding: 5px; box-sizing: border-box; background-color: transparent; }

    @@keyframes scaleH {
        from { transform: scaleX(0); }

        to { transform: scaleX(100%); }
    }

    .right-left { transform-origin: 100% 50%; animation: scaleH 0.2s; }

    .left-right { transform-origin: 0 50%; animation: scaleH 0.2s; }
</style>